<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-model="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>userlit列表</title>
    <meta name="author" content="小柒2012" />
    <meta name="site" content="https://blog.52itstyle.com" />
    <link rel="stylesheet" th:href="@{/iview/iview.css}">
    <script th:src="@{/libs/jquery-3.2.1.min.js}" type="text/javascript"></script>
    <script th:src="@{/libs/vue.min.js}" type="text/javascript"></script>
    <script th:src="@{/layer/layer.js}" type="text/javascript"></script>
    <script th:src="@{/iview/iview.min.js}" type="text/javascript"></script>
    <script th:src="@{/common.js}" type="text/javascript"></script>
    <style type="text/css">
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>

<div id="app" v-cloak>
    <table>
        <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>住址</th>
        </tr>
        </thead>
        <tbody><!--数据很多没有分页，一次性的查出来所有数据，对数据库压力过大，应该一次查4-5也数据，然后分页展示，但是了，总页数要显示 -->
        <tr v-for="user in userlist">
            <td v-text="user.uid"></td>
            <td v-text="user.username"></td>
            <td v-text="user.mobile"></td>
        </tr>
        </tbody>
    </table>
</div>


<script th:inline="javascript">
    //  ctx: /quartz/         captchaType: null
    var ctx = [[@{/}]];
    var captchaType = [[${captchaType}]];
    console.log('ctx'+ctx+'  captchaType'+captchaType);
</script>
<script>
    new Vue({
        el: '#app',
        data: {
            userlist: []
        },
        created: function () {
            //为了在内部函数能使用外部函数的this对象，要给它赋值了一个名叫self的变量。
            var self = this;
            $.ajax({
                url: '../user/userlist2',
                type: 'post',
                data: {},
                dataType: 'json'
            }).then(function (res) {
                console.log(res);
                //把从json获取的数据赋值给数组
                self.userlist = res;
            }).fail(function () {
                console.log('失败');
            })
        }
    })



</script>
<script>



</script>


</body>


</html>